<template>
  <div id="category">
    <NavBar class="ct-nav">
      <template v-slot:center>
        <div>分类页</div>
      </template>
    </NavBar>

    <div class="container">
      <Scroll class="slidebar">
        <CategorySlide @slideclick="slideclick" :slideList="categoryList" />
      </Scroll>
      <Scroll class="display">
        <CategoryDetail :detailsList="subcategoryList" />
        <TabControl @tabclick="tabclick" :titles="['流行', '新款', '精选']" />
        <div v-if="categoryDetailList">
          <GoodsList :goods="categoryDetailList" />
        </div>
        <div v-else>
          <div class="placeholder">暂无数据</div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import Scroll from "@/components/common/scroll/Scroll.vue";
import TabControl from "@/components/content/tabControl/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";

import CategorySlide from "./children/CategorySlide";
import CategoryDetail from "./children/CategoryDetail";

import {
  getCategory,
  getSubcategory,
  getCategoryDetail
} from "@/network/category.js";

export default {
  name: "category",
  components: {
    NavBar,
    CategorySlide,
    Scroll,
    CategoryDetail,
    TabControl,
    GoodsList
  },
  data() {
    return {
      categoryList: [],
      subcategoryList: [],
      categoryDetailList: [],
      detailList: [],
      goodsList: [],
      curMiniWallkey: "10062603",
      curIndex: 0,
      keyList: [],
      keyList2: [],
      list: []
    };
  },
  methods: {
    getCategoryList() {
      getCategory()
        .then(result => {
          this.categoryList = result.data.category.list;
          if (this.categoryList.length > 0) {
            this.getSubcategoryList(this.categoryList[0].maitKey, 0);
            this.getCategoryDetailList(
              this.categoryList[0].miniWallkey,
              "pop",
              0
            );
            this.getCategoryDetailList(
              this.categoryList[0].miniWallkey,
              "new",
              0
            );
            this.getCategoryDetailList(
              this.categoryList[0].miniWallkey,
              "sell",
              0
            );
            this.keyList.push(this.categoryList[0].miniWallkey);
            this.keyList2.push(this.categoryList[0].maitKey);
          }
        })
        .catch(err => {});
    },
    getSubcategoryList(key, index) {
      getSubcategory(key)
        .then(result => {
          this.detailList[index] = result.data.list;
          if (this.detailList.length > 1) {
            this.subcategoryList = this.detailList[index];
          } else {
            this.subcategoryList = this.detailList[0];
          }
        })
        .catch(err => {});
    },
    getCategoryDetailList(key, type, index) {
      this.list = [];
      getCategoryDetail(key, type)
        .then(result => {
          this.list.push(result);
          this.goodsList[index] = this.list;
          if (this.goodsList.length > 0) {
            this.categoryDetailList = this.goodsList[index][index];
          } else {
            this.categoryDetailList = this.goodsList[0][0];
          }
        })
        .catch(err => {});
    },
    slideclick({ maitKey, miniWallkey, index }) {
      this.curMiniWallkey = miniWallkey;
      this.curIndex = index;
      if (
        this.keyList.includes(miniWallkey) &&
        this.keyList2.includes(maitKey)
      ) {
        this.subcategoryList = this.detailList[index];
        this.categoryDetailList = this.goodsList[index][0];
      } else {
        this.keyList[index] = miniWallkey;
        this.keyList2[index] = maitKey;
        this.getCategoryDetailList(miniWallkey, "pop", index);
        this.getCategoryDetailList(miniWallkey, "new", index);
        this.getCategoryDetailList(miniWallkey, "sell", index);
        this.getSubcategoryList(maitKey, index);
      }
    },
    tabclick(index) {
      this.categoryDetailList = this.goodsList[this.curIndex][index];
    }
  },
  created() {
    this.getCategoryList();
  }
};
</script>

<style scoped>
#category {
  height: 100vh;
  padding-top: 44px;
}
.ct-nav {
  background: var(--color-tint);
  color: #fff;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.container {
  height: calc(100% - 49px);
  display: flex;
}
.slidebar {
  width: 80px;
  border-right: 1px solid #f1f1f1;
}
.display {
  flex: 1;
}
.placeholder {
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #333;
}
</style>